<template>
  <div class="values">
    <div class="container">
      <div class="value-content">
        <h2>我们理解的<br /><span class="highlight">情绪价值</span></h2>
        <p class="subtitle">——写在一盏深夜未熄的灯塔上</p>
        <p>
          你有没有过这样的时刻？<br />
          耳机里循环着同一首歌，窗外雨声像配角，突然想把音量调到最大，却发现身边没人一起听。<br />
          那一刻，你并不是非要谁拯救，只想世界回你一句："我在。"
        </p>
        <p>情绪价值，就是我们偷偷递给你的那句"我在"。</p>
        <p>
          它不必滚烫，不必长久，<br />
          可以只是一起把 3 公里的夜跑拆成 6 段互相打卡的语音，<br />
          可以只是两个陌生人各捧一杯热豆浆，在江边沉默地看完同一颗落日。<br />
          我们叫它"搭子"，听起来很轻，<br />
          却把"孤独"这块石头，悄悄磨成了可以握在手心的鹅卵石。
        </p>
        <p>
          在小岛屿，<br />
          算法不是冷冰冰的齿轮，而是夜航船的灯语——<br />
          你发出信号，它帮你把光打在另一座小岛屿的峭壁上：<br />
          "嘿，这里也有人睡不着，要不要一起听潮？"
        </p>
        <p>
          于是你们并排，<br />
          不交换故事，只交换此刻的呼吸；<br />
          不对未来负责，只对这一小时的真诚盖章。<br />
          然后各自返航，<br />
          却把对方的"嗯"装进船舱，<br />
          在下一次风浪来临的时候，<br />
          像掏出一颗糖那么自然，<br />
          剥开，放进嘴里，<br />
          甜味从舌头一路走到心里——<br />
          这就是情绪价值留下的痕迹。
        </p>
        <p>
          我们不懂山盟海誓，<br />
          只懂"今天有人陪我完成一件小事"，<br />
          就足以让城市从钢筋水泥，<br />
          变成可以躺下的草地。<br />
          原来，<br />
          被接住的感觉，<br />
          不是热辣的拥抱，<br />
          而是像毛衣背面悄悄被缝好的一粒脱线——<br />
          别人看不见，<br />
          你自己知道，<br />
          风再也吹不进去。
        </p>
        <p>
          所以，<br />
          如果你也刚好路过这片海域，<br />
          就举起你的小灯吧。<br />
          我们会把同频的光聚在一起，<br />
          让每一座小岛屿，<br />
          都不再是一座孤岛。<br />
          然后你可以继续远行，<br />
          带着被充电的心，<br />
          去更大的世界乘风破浪。<br />
          只是别忘了——<br />
          当你再次需要回应，<br />
          这里永远有人回你：<br />
          "我在，我们一起。"
        </p>
        <ul class="value-list">
          <li>
            <i class="fas fa-heart"></i> 我们尊重每一种生活节奏<br />
            <span class="list-detail"
              >不催你恋爱，不问你工资，只问你今天有没有好好吃饭。</span
            >
          </li>
          <li>
            <i class="fas fa-wind"></i> 我们给你无压力的社交空气<br />
            <span class="list-detail"
              >群聊可退，私聊可晚，已读不回也不会被贴标签。</span
            >
          </li>
          <li>
            <i class="fas fa-music"></i> 我们贪恋精神层面的共振<br />
            <span class="list-detail"
              >一句"我懂"比十句"喜欢你"更动人，深夜的共鸣可以只是两颗心一起跳快半拍。</span
            >
          </li>
          <li>
            <i class="fas fa-home"></i> 我们陪你搭建可持续的情感基站<br />
            <span class="list-detail"
              >把"在吗"换成"我在"，让每一次上线都像回家开灯。</span
            >
          </li>
        </ul>
      </div>
    </div>

    <!-- 价值观详细解释 -->
    <div class="values-details">
      <div class="container">
        <div class="value-detail-item">
          <div class="detail-icon">
            <i class="fas fa-heart"></i>
          </div>
          <div class="detail-text">
            <h3>情绪价值，有时比恋爱更暖</h3>
            <p>
              高质量的情感连接，不必以牵手为终点。<br />
              在小岛屿，你可以遇见纯粹的心灵回声，<br />
              没有"多久表白"的倒计时，<br />
              也没有"见家长"的必答题集。
            </p>
          </div>
        </div>

        <div class="value-detail-item">
          <div class="detail-icon">
            <i class="fas fa-paper-plane"></i>
          </div>
          <div class="detail-text">
            <h3>重新定义社交关系</h3>
            <p>
              我们把传统模板揉皱，<br />
              再折成一只纸船：<br />
              深度交流是船底，<br />
              彼此独立是船帆——<br />
              你可以随时靠岸，也可以随时远航。
            </p>
          </div>
        </div>

        <div class="value-detail-item">
          <div class="detail-icon">
            <i class="fas fa-comments"></i>
          </div>
          <div class="detail-text">
            <h3>悄悄话心理咨询</h3>
            <p>
              当你想说却说不出，<br />
              岛上树洞 24h 营业。<br />
              持证的心理师化身"深夜电台"，<br />
              用科学换你的安心，<br />
              用保密换你的放心。<br />
              <span class="privacy-note"
                >（聊天记录不上云，连我们自己也偷看不到）</span
              >
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 价值主张 -->
    <div class="value-proposition">
      <div class="invitation-content">
        <h3>来小岛屿吧</h3>
        <p class="invitation-text">
          把孤独调成静音，<br />
          把情绪调到刚好被听见的音量——<br />
          让每一座小岛屿，从此不再是一座孤岛。
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
</script>

<style scoped>
/* 情绪价值页面基础样式 */
.values {
  margin-top: var(--spacing-3xl);
  background: var(--background-color);
  overflow-x: hidden;
  touch-action: pan-y;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* 顶部价值介绍区域 - PC端左右分栏布局 */
.value-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 500px;
  margin-bottom: var(--spacing-xxl);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards 0.3s;
}

/* PC端大屏幕布局 */
@media (min-width: 1200px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
    align-items: start;
  }

  .value-content {
    max-width: none;
    margin-bottom: 0;
  }
}

/* 超宽屏幕优化 */
@media (min-width: 1600px) {
  .container {
    max-width: 1400px;
    gap: var(--spacing-xxxl);
  }

  .value-content h2 {
    font-size: var(--font-4xl);
  }

  .value-content p {
    font-size: var(--font-base);
  }

  .value-list li {
    font-size: var(--font-base);
  }
}

/* 横屏模式优化 */
@media (max-height: 600px) and (orientation: landscape) {
  .values {
    padding: var(--spacing-md) 0;
  }

  .value-content {
    margin-bottom: var(--spacing-md);
  }

  .values-details {
    padding: var(--spacing-md) 0;
  }

  .value-detail-item {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
  }
}

.value-content h2 {
  font-size: var(--font-3xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  line-height: 1.3;
}

.value-content h2 .highlight {
  color: var(--primary-color);
}

.value-content .subtitle {
  font-size: var(--font-lg);
  color: var(--primary-color);
  font-style: italic;
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.value-content p {
  font-size: var(--font-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.value-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.value-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-lg);
  color: var(--text-secondary);
  line-height: 1.5;
  flex-direction: column;
}

.value-list li i {
  color: var(--primary-color);
  margin-right: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-lg);
}

.list-detail {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  margin-left: var(--spacing-lg);
  font-style: italic;
  line-height: 1.4;
}

/* 价值观详细解释区域 */
.values-details {
  background: var(--text-light);
  padding: var(--spacing-xxl) 0;
  margin-bottom: var(--spacing-xxl);
}

.value-detail-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  border-radius: 12px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
}

.value-detail-item:nth-child(1) {
  animation: fadeUp 0.6s ease forwards 0.9s;
}

.value-detail-item:nth-child(2) {
  animation: fadeUp 0.6s ease forwards 1.2s;
}

.value-detail-item:nth-child(3) {
  animation: fadeUp 0.6s ease forwards 1.5s;
}

.value-detail-item:hover {
  background: rgba(66, 184, 131, 0.05);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(66, 184, 131, 0.1);
}

.detail-icon {
  width: 60px;
  height: 60px;
  background: var(--primary-color);
  color: var(--text-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.value-detail-item:hover .detail-icon {
  transform: scale(1.1);
}

.detail-text h3 {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.detail-text p {
  font-size: var(--font-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

.privacy-note {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  font-style: italic;
  display: block;
  margin-top: var(--spacing-sm);
}

/* 价值主张区域 */
.value-proposition {
  background: linear-gradient(
    135deg,
    rgba(66, 184, 131, 0.05) 0%,
    rgba(66, 184, 131, 0.1) 100%
  );
  padding: var(--spacing-xxl) 0;
  border-radius: 16px;
  opacity: 0;
  animation: fadeIn 1s ease forwards 1.8s;
}

.invitation-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.invitation-content h3 {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

.invitation-text {
  font-size: var(--font-base);
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
  text-align: center;
  margin: 0;
  padding: 0;
  display: inline-block;
}

/* 响应式设计 - 平板端 */
@media (max-width: 1199px) and (min-width: 769px) {
  .container {
    display: block;
  }

  .value-content {
    max-width: 100%;
    text-align: center;
    align-items: center;
    margin-bottom: var(--spacing-xl);
  }

  .value-content h2 {
    font-size: var(--font-2xl);
  }

  .value-content p {
    font-size: var(--font-base);
  }

  .value-list li {
    font-size: var(--font-sm);
  }

  .detail-text h3 {
    font-size: var(--font-lg);
  }

  .detail-text p {
    font-size: var(--font-sm);
  }

  .invitation-content h3 {
    font-size: var(--font-xl);
  }

  .invitation-text {
    font-size: var(--font-base);
  }

  .detail-icon {
    width: 50px;
    height: 50px;
    font-size: var(--font-lg);
  }
}

/* 响应式设计 - 移动端 */
@media (max-width: 768px) {
  .values {
    padding: var(--spacing-lg) 0;
  }

  .container {
    padding: 0 var(--spacing-sm);
  }

  .value-content {
    max-width: 100%;
    text-align: center;
    align-items: center;
    margin-bottom: var(--spacing-lg);
  }

  .value-content h2 {
    font-size: var(--font-xl);
    margin-bottom: var(--spacing-md);
  }

  .value-content .subtitle {
    font-size: var(--font-base);
    margin-bottom: var(--spacing-md);
  }

  .value-content p {
    font-size: var(--font-sm);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
  }

  .value-list {
    margin-top: var(--spacing-md);
  }

  .value-list li {
    font-size: var(--font-sm);
    margin-bottom: var(--spacing-md);
    text-align: left;
  }

  .list-detail {
    font-size: var(--font-xs);
    margin-left: var(--spacing-md);
    margin-top: var(--spacing-xs);
  }

  .values-details {
    padding: var(--spacing-lg) 0;
    margin-bottom: var(--spacing-lg);
  }

  .value-detail-item {
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    border-radius: 8px;
  }

  .detail-icon {
    width: 45px;
    height: 45px;
    font-size: var(--font-base);
    margin-bottom: var(--spacing-sm);
  }

  .detail-text h3 {
    font-size: var(--font-base);
    margin-bottom: var(--spacing-sm);
  }

  .detail-text p {
    font-size: var(--font-sm);
    line-height: 1.4;
  }

  .privacy-note {
    font-size: var(--font-xs);
    margin-top: var(--spacing-xs);
  }

  .value-proposition {
    padding: var(--spacing-lg) var(--spacing-sm);
    border-radius: 12px;
  }

  .invitation-content {
    max-width: 100%;
  }

  .invitation-content h3 {
    font-size: var(--font-lg);
    margin-bottom: var(--spacing-md);
  }

  .invitation-text {
    font-size: var(--font-sm);
    line-height: 1.5;
  }
}

/* 小屏幕移动端优化 */
@media (max-width: 480px) {
  .values {
    padding: var(--spacing-md) 0;
  }

  .container {
    padding: 0 var(--spacing-xs);
  }

  .value-content h2 {
    font-size: var(--font-lg);
  }

  .value-content .subtitle {
    font-size: var(--font-sm);
  }

  .value-content p {
    font-size: var(--font-xs);
  }

  .value-list li {
    font-size: var(--font-xs);
  }

  .list-detail {
    font-size: 11px;
  }

  .detail-icon {
    width: 40px;
    height: 40px;
    font-size: var(--font-sm);
  }

  .detail-text h3 {
    font-size: var(--font-sm);
  }

  .detail-text p {
    font-size: var(--font-xs);
  }

  .invitation-content h3 {
    font-size: var(--font-base);
  }

  .invitation-text {
    font-size: var(--font-xs);
  }
}

/* 移动端触摸优化 */
@media (max-width: 768px) {
  .value-detail-item {
    touch-action: manipulation;
  }

  .value-detail-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* 优化滚动性能 */
  .values {
    will-change: transform;
  }

  /* 移动端字体优化 */
  .value-content h2,
  .detail-text h3,
  .invitation-content h3 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* 移动端列表项优化 */
  .value-list li {
    padding: var(--spacing-xs) 0;
  }
}

/* 全局动画定义 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 字体加载优化 */
.value-content h2,
.value-content p,
.value-list li,
.detail-text h3,
.detail-text p,
.invitation-content h3,
.invitation-text {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 文本选择优化 */
::selection {
  background-color: rgba(66, 184, 131, 0.3);
  color: var(--text-primary);
}

::-moz-selection {
  background-color: rgba(66, 184, 131, 0.3);
  color: var(--text-primary);
}
</style>
